<template>  
    <view class="context">
       <view class="identityName">{{ identityName }}</view>
       <view class="identityNumber">{{ identityNumber.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</view>
       <!-- 健康分 -->
       <view class="detectDivide">
         <u-circle-progress :active-color="status == 1 ? '#D12C25' : status == 2 ? '#ffc123': '#28c445' " :percent="divide" :border-width="30" :width="270">
           <view class="healtDevide">健康分</view>
           <view>{{ divide }}</view>
         </u-circle-progress>
         <view class="detectTex" v-if="status == 1">健康分偏低： 请注意 <u-icon name="error-circle" color="#D12C25" size="28"></u-icon></view>
         <view class="detectTex" v-if="status == 2">健康分标准</view>
         <view class="detectTex" v-if="status == 3">您的身体非常健康！ 请继续保持</view>
       </view> 
       <!-- 健康问卷 -->
        <view class="healthQuestionnaires">
          <view class="questionnairesTitle"><text class="questionnairesText"></text>健康问卷</view>
          <view v-for="(item,index) in answerVosList" :key="index">
            <view class="questionAaires">{{ index + 1 }}、 {{ item.questionsConter }}</view>
            <view class="answersContent">{{ item.answersContent == 1 ? '完全没有' : item.answersContent == 2 ? '近半年偶尔' : item.answersContent == 3 ? '近期经常' : '每天都有'}}</view>
          </view>
        </view>
       <!-- 心脏检测 -->
       <view class="cardiacTesting">
          <view class="questionnairesTitle"><text class="questionnairesText"></text>心脏检测</view>
          <view class="cardiacTestingBox">
           <view class="cardiacActivityTitle">心脏活动力</view>
           <view class="cardiacActivity">{{ this.cardiacActivity == 1 ? '低' : this.cardiacActivity == 2 ? '稍低' : this.cardiacActivity == 3 ? '一般' : this.cardiacActivity == 4 ? '好' : '很好'}}</view>
          </view>
          <view class="cardiacTestingBox">
           <view class="heartRateTitle">1.心率</view>
            <view class="cardiacActivity">{{ heartRate }}</view>
          </view>
          <view class="Tips">
           温馨提示:成人正常静息心率为60~100次/分(正常),如果您的静息心率持续高于100次/分(心动过速)或您不是受训运动员而静息心率低于60次/分（心动过缓），伴有昏厥、头晕或呼吸短促等其他体征或症状，请向医生咨询。
          </view>
          <view class="cardiacTestingBox">
             <view class="heartRateTitle">2.心律不齐</view>
             <view class="cardiacNum">{{ arrhythmia == 1 ? '正常' : '异常' }}</view>
          </view>
          <view class="heartRateTitle">3.相关疾病</view>
          <view class="cardiacTestingBox">
             <view class="testResults">正常</view>
             <view class="cardiacNum">{{ heartDisease }}%</view>
          </view>
          <view class="cardiacTestingBox">
             <view class="testResults">主动脉瓣狭窄</view>
             <view class="cardiacNum">{{ aorticStenosis }}%</view>
          </view>
          <view class="cardiacTestingBox">
             <view class="testResults">二尖瓣闭锁不全</view>
             <view class="cardiacNum">{{ mitralInsufficiency }}%</view>
          </view>
          <view class="cardiacTestingBox">
             <view class="testResults">二尖瓣狭窄</view>
             <view class="cardiacNum">{{ mitralStenosis }}%</view>
          </view>
          <view class="cardiacTestingBox">
             <view class="testResults">二尖瓣脱垂</view>
             <view class="cardiacNum">{{ mitralProlapse }}%</view>
          </view>
       </view>
     </view>
  </template>
  
  <script>
     import { selectTesting } from '../api/health';
     export default {
       data() {
         return {
           status:1,
           divide:0,
           identityName:"",
           identityNumber:"",
           answerVosList:[],
           cardiacActivity:'',
           heartRate:0,
           arrhythmia:'',
           heartDisease:0,
           aorticStenosis:0,
           mitralInsufficiency:0,
           mitralStenosis:0,
           mitralProlapse:0,
           resultId:'',
           cardiographId:''
         }
       },
       onLoad(optioin) {    
        console.log('查看',optioin);
        this.resultId = optioin.resultId;
        this.cardiographId = optioin.cardiographId;
        if(optioin.resultId == 0) {
          this.identityName = '小明'
          this.identityNumber = '130000000000000000'
          this.divide = 100
          this.cardiacActivity = 0
          this.heartRate = 80
          this.arrhythmia = 1
          this.status = 3
          this.heartDisease = 100
          this.answerVosList =  [
            {
                "answersId": "1849362254470975488",
                "questionsId": "1848298672077541376",
                "questionsConter": "是否存在生活不能自理的情况，包括自主穿衣、吃饭、洗澡等？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254479364096",
                "questionsId": "1848298756823453696",
                "questionsConter": "是否存在心脏、肺、肾脏等重要脏器过度疼痛情况？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254483558400",
                "questionsId": "1848298808895737856",
                "questionsConter": "是否存在血压、血糖异常情况？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254487752704",
                "questionsId": "1848298839287664640",
                "questionsConter": "是否存在关节疼痛无法活动的情况？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254491947008",
                "questionsId": "1848298867557273600",
                "questionsConter": "是否存在听力、视力异常情况？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254500335616",
                "questionsId": "1848298987216572416",
                "questionsConter": "是否存在偏头痛情况？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254504529920",
                "questionsId": "1848299035115524096",
                "questionsConter": "是否存在失眠、嗜睡、生物钟黑白颠倒情况，比如凌晨3点不能入睡？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254508724224",
                "questionsId": "1848299075905130496",
                "questionsConter": "是否存在饮食不规律、饮食不均衡的情况，比如吃不下饭？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254512918528",
                "questionsId": "1848299108201271296",
                "questionsConter": "是否存在记忆力下降、反应能力下降的情况？",
                "answersContent": 1,
                "answersScore": 1
            },
            {
                "answersId": "1849362254517112832",
                "questionsId": "1848299135611047936",
                "questionsConter": "是否存在情绪不稳定的情况，比如暴躁易怒、喜怒无常等？",
                "answersContent": 1,
                "answersScore": 1
            }
        ]
        } else {
          this.resultDetail ()
        }
       
       },
       methods: {
           resultDetail() {
            let obj= {
                resultId: this.resultId,
                cardiographId: this.cardiographId
            }
            let _this = this
            selectTesting(obj).then(res=> {
                console.log('查询检测详情',res);
                _this.identityName = res.data.identityName,
                _this.identityNumber = res.data.identityNumber,
                _this.divide = res.data.totalScore,
                _this.answerVosList = res.data.answerVos,
                _this.cardiacActivity = res.data.cardiacActivity,
                _this.heartRate = res.data.heartRate,
                _this.arrhythmia = res.data.arrhythmia,
                _this.heartDisease = res.data.heartDisease,
                _this.aorticStenosis = res.data.aorticStenosis,
                _this.mitralInsufficiency = res.data.mitralInsufficiency,
                _this.mitralStenosis = res.data.mitralStenosis,
                _this.mitralProlapse = res.data.mitralProlapse
                console.log(_this.answerVosList);
                
                  // 分数＜65为较差     65≤分数＜85为正常     85≤分数≤100为优秀
                if(_this.divide < 65) {
                  _this.status = 1
                }else if(_this.divide <85 || _this.delta >= 65) {
                  _this.status = 2
                }else {
                  _this.status = 3
                }
            })
           } 
       }
 }
  </script>
  
  <style lang="scss" scoped>
   .context {
     background: #F5F5F5;
     box-sizing: border-box;
     padding: 32rpx;
     display: flex;
      align-items: center;
     flex-direction: column;
     min-height: 100vh;
 
     .questionnairesTitle {
       display: flex;
       align-items: center;
       // height: 40rpx;
       font-family: PingFang SC;
       font-weight: 500;
       font-size: 28rpx;
       color: rgba(0,0,0,0.8);
 
      .questionnairesText{
         display: inline-block;
         width: 4rpx;
         height: 24rpx;
         background: #D12C25;
         border-radius: 8rpx;
         margin-right: 24rpx;
       }
     }
     
    .identityName {
      height: 56rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 40rpx;
      color: rgba(0,0,0,0.9);
      line-height: 56rpx;
      text-align: center;
    }
 
    .identityNumber {
     height: 40rpx;
     font-family: PingFang SC, PingFang SC;
     font-weight: 400;
     line-height: 40rpx;
     text-align: center;
    }
 
    
    .detectDivide {
       width: 614rpx;
       height: 440rpx;
       margin-top: 32rpx;
       background:#fff;
       box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
       border-radius: 8rpx 8rpx 8rpx 8rpx;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
 
 
       .u-progress-content {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
       }
       
       .u-progress-info {
         font-size: 28rpx;
         padding-left: 16rpx;
         letter-spacing: 2rpx;
       }
 
       .detectTex {
         height: 44rpx;
         line-height: 44rpx;
         font-family: PingFang SC;
         font-weight: 400;
         font-size: 28rpx;   
         color: rgba(0,0,0,0.9);
       }
     }
 
     .cardiacTesting {
       width: 686rpx;
       height: 724rpx;
       background: #FFFFFF;
       border-radius: 8rpx;
       margin-top: 16rpx;
       padding: 24rpx 20rpx;
 
       .cardiacTestingBox {
         margin-top: 16rpx;
         display: flex;
         justify-content: space-between;
 
          .heartRateTitle {
           height: 36rpx;
           line-height: 36rpx;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
          }
 
          .testResults {
           height: 40rpx;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
           line-height: 40rpx;
          }
 
          .cardiacActivityTitle {
            height: 44rpx;
            line-height: 44rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: rgba(0,0,0,0.8);
          }
 
         .cardiacActivity {
           height: 40rpx;
           line-height: 40rpx;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
           font-size: 28rpx;
           color:#D12C25;
         }
       }   
       
       .Tips {
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
         font-size: 24rpx;
         color: #7D7A7A;
         line-height: 28rpx;
       }
 
       .cardiacNum {
         height: 46rpx;
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
         line-height: 46rpx;
       }
     }
 
     .healthQuestionnaires {
       width: 686rpx;
       background: #FFFFFF;
       border-radius: 8rpx;
       margin-top: 16rpx;
       padding: 24rpx 20rpx;
 
       .questionAaires {
         margin-top: 16rpx;
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
         font-size: 24rpx;
         color: rgba(0,0,0,0.8);
         line-height: 42rpx;
       }
 
       .answersContent {
         height: 42rpx;
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
         font-size: 24rpx;
         color: #333333;
         line-height: 42rpx;
       }
     }
   }
 
   ::v-deep .u-circle-progress {
   background:none !important;
 }
  </style>